<script setup lang="ts">

import {useRouter} from "vue-router";
import {computed, onMounted, ref} from "vue";
import myAxios from "../plugins/myAxios.ts";
import {showConfirmDialog, showFailToast, showSuccessToast, showToast} from "vant";



const router = useRouter()
const haha = () => {
  router.push("/user/edit")
}


let time: ReturnType<typeof setTimeout>; // 定义 time 变量的类型

const down = (): void => {
  time = setTimeout(() => {
    haha();
  }, 600);
};

const up = (): void => {
  clearTimeout(time);
};

const show = ref(false);
const showPopup = () => {
  show.value = true;
};
const popup1 = () => {
  router.push("/md")
}
const popup2 = () => {
  router.push("/base64")
}
const popup3 = () => {
  router.push("/base64decode")
}

const currentRate = ref(0);

const text = computed(() => "经验值：" + currentRate.value + '%');
const gradientColor = {
  '0%': '#3fecff',
  '100%': '#6149f6',
};

const user = ref(
    {
      userName: '',
      userAvatar: '',
      userPhone: '',
      userEmail: '',
      userProfile: '',
      gender: '',
      userLevel: 0,
      atPresentExperience: 0
    }
);

const rateRef = ref(0);
const rate = ref(0);
const level = ref(0);
onMounted(() => {
  rateRef.value = 0
  myAxios.get('/user/search')
      .then(res => {
        console.log(res.data.data)
        user.value = res.data.data
        level.value = user.value.userLevel
        const rate = user.value.atPresentExperience
        rateRef.value = (rate / 2000) * 100
        if (rateRef.value >= 100) {
          //展示突破按钮
          showUpgradeImage.value = true
        }
        console.log(rateRef.value)
      })
      .catch(err => {
        console.log(err)
      })
});
const levelUpLoad = () => {
  myAxios.get('/user/search')
      .then(res => {
        console.log(res.data.data)
        user.value = res.data.data
        level.value = user.value.userLevel
        rate.value = user.value.atPresentExperience
        rateRef.value = (rate.value / 2000) * 100
        showUpgradeImage.value = rateRef.value >= 100;
        console.log(rateRef.value)
      })
      .catch(err => {
        console.log(err)
      })
}

const showUpgradeImage = ref(false);


const onLevelUp = () => {
  myAxios.get('/level/upgrade')
      .then(res => {
        console.log(res.data.data)
        //展示升级成功弹窗 并刷新页面

        if (res.data.data) {
          showToast({
            duration: 1000,
            icon: 'https://lanyun-1325629469.cos.ap-chongqing.myqcloud.com/test/%E6%9C%80%E7%BB%88%E7%AD%89%E7%BA%A7%E6%8F%90%E5%8D%87%E6%8F%90%E7%A4%BA.png',
            iconSize: 100,  // 调整图片的大小
          });
          levelUpLoad()
        }
      })
      .catch(err => {
        console.log(err)
      })
}

const outLogin = () => {
  showConfirmDialog({
    title: '退出',
    message: '确认退出登录吗？',
  })
     .then(() => {
       myAxios.get('/user/out')
           .then(function () {
             // 处理成功情况
             showSuccessToast('退出成功');
             setTimeout(() => {
               window.location.href = '/user/login';
             }, 1000);
           })
           .catch(function (error) {
             // 处理错误情况
             console.error(error);
             showFailToast('退出失败');
           })
     })
     .catch(() => {
       // 点击取消
     })

}




const myFavour = () => {
  router.push('/my/favour')
}

const myPost = () => {
  router.push('/my/post')
}

const myHistory = () => {
  router.push('/my/history')
}

</script>

<template>
  <!-- 自定义图标 -->
  <img src="../assets/最终工具栏.png" class="icon" @click="showPopup"/>
  <van-popup
      class="popup"
      v-model:show="show"
      position="right"
      :style="{ width: '40%', height: '100%' }">
    <div class="popup-content">
      <div class="title">工具箱</div>
      <div class="popup-tool">
        <van-button @click="popup1" class="tool-image">
          MD5加密
        </van-button>

        <van-button @click="popup2" class="tool-image">
          Base64加密
        </van-button>
        <van-button @click="popup3" class="tool-image">
          Base64解密
        </van-button>
        <van-button type="warning" @click="outLogin" class="tool-image">
          退出登录
        </van-button>
      </div>
    </div>

  </van-popup>

  <div id="building">

    <div class="card" @touchstart="down" @touchend="up">

      <img
          class="hero"
          src="../assets/透明化图片3.png"
      />
      <img
          class="cover"
          src="../assets/洞府背景.png"
      />
      <img
          class="cover-back"
          src="../assets/洞府背景2.png"
      />
    </div>

    <div class="character-creation">
      <img class="character-creation-image" src="../assets/最终用户展示.png"/>
    </div>


  </div>

  <img id="upgrade-image" class="upgrade-image" :style="{ opacity: showUpgradeImage ? 1 : 0 }"
       src="../assets/最终升级图标.png" alt="Upgrade" @click="onLevelUp"/>
  <div class="upgrade">


    <div class="upgrade-text">
       <p class="level-text">等级：{{level}}</p>
      <van-icon
          name="https://lanyun-1325629469.cos.ap-chongqing.myqcloud.com/test/%E6%9C%80%E7%BB%88%E6%88%91%E7%9A%84%E6%94%B6%E8%97%8F.png"
          size="60"
          class="my-favour"
          @click="myFavour"
           />
      <van-icon
          name="https://lanyun-1325629469.cos.ap-chongqing.myqcloud.com/test/%E6%9C%80%E7%BB%88%E6%88%91%E7%9A%84%E5%B8%96%E5%AD%90.png"
          size="60"
          class="my-post"
          @click="myPost"
      />
      <van-icon
          name="https://lanyun-1325629469.cos.ap-chongqing.myqcloud.com/test/mp_icon_pb.png"
          size="60"
          class="my-history"
          @click="myHistory"
      />
      <p class="level-text" style="left:90%; width: 20%; top: 12%; font-size: 18px;">我的收藏</p>
      <p class="level-text" style="left:90%; width: 20%; top: 38%; font-size: 18px;">我的帖子</p>
      <p class="level-text" style="left:90%; width: 20%; top: 65%; font-size: 18px;">历史记录</p>

    </div>

    <van-circle
        v-model:current-rate="currentRate"
        :rate="rateRef"
        :speed="80"
        :text="text"
        class="circle"
        :color="gradientColor"
    />


  </div>

  <div class="background-image">
  </div>


</template>

<style scoped>
.my-favour {
  position: absolute;
  left: 83%;
  top: 0;
}
.my-post {
  position: absolute;
  top: 28%;
  left: 82%;
}
.my-history {
  position: absolute;
  top: 56%;
  left: 82%;
}

.upgrade {
  position: absolute;
  width: 100%;
  height: 50%;
  top: 50%;
}
.upgrade-text {
  width: 100%;
  height: 100%;
  display: flex;
}
.level-text {
  font-size: 24px;
  color: #fff;
  position: absolute;
  font-family: STXingkai, serif;
  top: 68%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.upgrade-image {
  position: absolute;
  width: 15%;
  height: 15%;
  top: 70%;
  left: 44%;
  opacity: 0;
  z-index: 10;
}


.circle {
  position: absolute;
  top: 0;
  left: 38%;
  Z-index: 10;
}

.tool-image {
  background-image: url('https://lanyun-1325629469.cos.ap-chongqing.myqcloud.com/test/zjm_board_touxiang_02.png');
  background-size: 100% 100%; /* 图片大小 */
  width: 320%;
  left: -10%;
  margin: 5px;
}

.character-creation-image {
  position: absolute;
  width: 60%;
  height: 100%;
  top: 80%;
  left: 20%;
  z-index: 10;
}


.popup-tool {
  position: absolute;
  width: 20%;
  height: 100%;
  left: 18%;
  top: 8%;
}


.title {
  font-size: 24px;
  color: #fff;
  position: absolute;
  font-family: STXingkai, serif;
  top: 2%;
  left: 25%;
  height: 5%;
}


.popup-content {
  top: 50%;
}

.popup {
  background-image: url('../assets/最终弹出框.png');
  background-size: 100% 100%;
  position: absolute;
  z-index: 999;
  display: flex;
}


.icon {
  position: absolute;
  float: right;
  right: 0;
  top: -5px;
  width: 45px;
  height: 50px;
  z-index: 2;

}

#building {
  background-size: 50% 50%;
  width: 100%;
  height: 50%;
  position: absolute;
  opacity: 0.6;
  z-index: 0;
}

#below-building {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50%;
  top: 50%;
  background-color: #f5f5f5;
  opacity: 0;
  z-index: 0;
}

.background-image {
  background-image: url('../assets/最终洞府背景1.png');
  width: 100%;
  height: 100%;
  z-index: -1;
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.card {
  width: 80%;
  height: 100%;
  margin: 0 auto;
  position: relative;
  display: block;
}

.card img {
  width: 100%;
  position: absolute;
  transition: 1s;
}

.cover {
  z-index: 1;
  height: 80%;
}

.cover-back {
  z-index: 2;
  height: 100%;

}

.card:active .cover {
  box-shadow: 0 35px 35px -8px rgba(0, 0, 0, 7);
  transform: perspective(500px) rotateX(250deg)
}

.hero {
  z-index: 2;
  opacity: 0;
  width: 100%;
  height: 130%;
  transition: 1s;

}

.card:active .hero {
  opacity: 1;
  transform: perspective(500px) translate3d(0, -50px, 50px);
}

.title {
  z-index: 3;
  bottom: 0;
}

.card:active .title {
  transform: perspective(500px) translate3d(0, -25px, 50px);

}


</style>